<template>
  <div class="upload">
    <van-popup class="mypop" :close-on-click-overlay="false" v-model="show">
      <!-- <van-uploader>
        <div>从相册中选择</div>
      </van-uploader> -->
      <div @click="openfile">从相册中选择</div>
      <input ref="myfile" @change="imgchange" type="file" style="display: none">

      <div class="middle">拍照</div>
      <div @click="show=false">取消</div>
    </van-popup>
  </div>
</template>

<script>
// 导入图片预览
import { ImagePreview } from 'vant'
import { apiEditUpload } from '@/api/user.js'

export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    // 打开 图片文件
    openfile () {
      this.$refs.myfile.click()
    },
    // change事件：在图片发生改变时触发
    imgchange () {
      // 图片对象
      const file = this.$refs.myfile.files[0]
      // 方式一：将图片对象转为一个虚拟地址
      // const path = URL.createObjectURL(file)
      // ImagePreview([path])
      // 方式二：使用fileReader将file对象转为 base64格式的url
      // 创建fileReader
      const reader = new FileReader()
      reader.readAsDataURL(file)
      // 设置事件：设置转换成功之后的事件（这个事件会在转换成功之后触发）
      reader.addEventListener('load', () => {
        // 预览图片
        ImagePreview({
          images: [reader.result],
          // 关闭事件
          onClose: this.colseMethod
        })
      })
    },
    // 关闭图片时弹出对话框事件
    colseMethod () {
      // 关闭弹出层
      this.show = false
      this.$dialog.confirm({
        message: '是否要将此图片设为头像'
      }).then(async () => {
        // 点击确认
        // 1.得到上传的图片
        const file = this.$refs.myfile.files[0]
        // console.log(file)
        // 2.将修改的图片提交给服务器
        const res = await apiEditUpload(file)
        console.log(res)
        const photo = res.data.photo
        // 传入info组件中去渲染图片
        this.$emit('changephoto', photo)
        // 清除图片缓存
        this.$refs.myfile.value = ''
      }).catch(() => {
        // 点击取消
        // on cancel
      })
    }
  }
}
</script>

<style lang="less" scoped>
.upload{
  .mypop{
    width: 80%;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;

    .middle{
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
